<template>
  <div class="custom-body" :style="borderStyle">
    <!--  模版头  -->
    <default-column-header v-if="showHeader" :temp="temp" />
    <div class="custom-content">
      <el-empty v-if="dataList === null || dataList.length === 0" :image-size="100" />
      <div v-else>
        <div
          v-for="(obj,index) in dataList"
          :key="'obj-'+index"
          class="custom-ul-li"
          @click="openEntity(obj)"
        >
          <div class="custom-date">
            <div class="custom-date-body">
              <div class="custom-date-line top"><time-format :date="obj[column[0].time]" :type="'day'" /></div>
              <div class="custom-date-line"><time-format :date="obj[column[0].time]" :type="'year'" /></div>
            </div>
          </div>
          <div class="custom-line">
            {{ obj[column[0].title] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { template } from '@/mixins/template'
import DefaultColumnHeader from '@/portal4.1/pc/component/column/DefaultColumnHeader.vue'
import { layout } from '@/mixins/layout'
import TimeFormat from '@/template/NewList/PcListTemplateFirst/solt/time.vue'
export default {
  name: 'PcNewListTempV4',
  components: { DefaultColumnHeader, TimeFormat },
  mixins: [template, layout]
}
</script>

<style lang="scss" scoped>
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  border-radius: 4px;
  padding: 0 0 10px 0;
  box-sizing: border-box;
  overflow: hidden;
}
.custom-content {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  padding: 0 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.custom-ul-header {
  font-weight: 600;
  text-align: left;
}

.custom-ul-header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.custom-ul-li {
  width: 100%;
  height: 80px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 0;
  color: var(--edu-text-100);
}
.custom-line:hover {
  color: var(--edu-hover-text-100);
  background-color: var(--edu-hover-bg-200);
}
.custom-date {
  width: 60px;
  height: 60px;
  box-sizing: border-box;
}
.custom-date-body {
  width: 100%;
  height: 100%;
  border: 1px solid var(--edu-hover-bg-100);
}
.custom-line {
  flex: 1 1;
  font-size: 0.9rem;
  line-height: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  box-sizing: border-box;
}
.custom-date-line {
  width: 100%;
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 0.8rem;
  color: var(--edu-hover-text-100);
}
.custom-date-line.top {
  background-color: var(--edu-hover-bg-100);
  color: var(--edu-hover-color-200);
  font-size: 1.3rem;
  font-weight: bold;
}
</style>
